<template>
  <el-dialog
    :visible.sync="visible"
    width="1200px"
    title="预警信息明细"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    :class="{
      'drill-dialog': true,
      'drill-dialog-dark': isDarkTheme,
      'drill-dialog-light': !isDarkTheme
    }"
  >
    <div class="header-box">
      <div class="header-left">
        <img src="../css/dialogIcon-dark.png" alt="">
        <span>预警信息明细</span> 
      </div>
      <div class="header-right">
        <img src="../css/dialogClose-dark.png" @click="handleClose" alt="">
      </div>
    </div>
    <div class="content-box">
      <div class="title-box">
        <CustomTitle
          :pageConfig="pageConfig"
          :title="title1"
        />
      </div>
      <el-form
        size="small"
        :model="form"
        ref="form"
        label-position="top"
        :inline="true"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="预警单号：" prop="warningType">
              <SplitLine />
              <span>{{ form.warningNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警类型：" prop="warningType">
              <SplitLine />
              <span>{{ form.warningType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前状态：" prop="warningType">
              <SplitLine />
              <span :style="formatStatus(form.warningStatus).style">{{ form.warningStatus }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="title-box">
        <CustomTitle
          :pageConfig="pageConfig"
          :title="title2"
        />
      </div>
      <el-form
        size="small"
        :model="detailInfo"
        ref="form"
        label-position="top"
        :inline="true"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="省份：" prop="province">
              <SplitLine />
              <span>{{ detailInfo.province }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经济事项：" prop="economicMatter">
              <SplitLine />
              <span>{{ detailInfo.economicMatter }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型：" prop="type">
              <SplitLine />
              <span>{{ detailInfo.type }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行账号：" prop="runAccount">
              <SplitLine />
              <span>{{ detailInfo.runAccount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名：" prop="name">
              <SplitLine />
              <span>{{ detailInfo.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预警描述：" prop="description">
              <SplitLine />
              <span>{{ detailInfo.description }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件信息：" prop="attachmentInfo">
              <SplitLine />
              <span>{{ detailInfo.attachmentInfo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="title-box">
        <CustomTitle
          :pageConfig="pageConfig"
          :title="title3"
        />
      </div>
      <CustomTable
        :columns="columns"
        :data="detailInfo"
      >
        <template slot="warningStatus" slot-scope="scope">
          <div>
            <span :style="formatStatus(scope.row.warningStatus).style">{{ scope.row.warningStatus }}</span>
          </div>
        </template>
      </CustomTable>
    </div>
  </el-dialog>
</template>

<script>
import CustomTable from '../DetailComponents/CustomTable';
import CustomTitle from '../components/CustomTitle.vue';
import SplitLine from '../DetailComponents/SplitLine.vue';


export default {
  props: {
    pageConfig: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    CustomTable,
    CustomTitle,
    SplitLine,
  },
  data() {
    return {
      visible: false,
      title1: "基本信息",
      title2: "详细信息",
      title3: "处理过程",
      form: {
        warningNo: '预警单号123',
        warningType: '123',
        warningStatus: '已接收', 
      },
      detailInfo: {
        province: '123',
        economicMatter: '123',
        type: '123',
        runAccount: '123',
        name: '123',
        description: '123',
        attachmentInfo: '123',
      },
      columns: [
        {
          prop: 'name',
          label: '环节',
          minWidth: 120
        },
        {
          prop: 'age',
          label: '经济事项',
          minWidth: 160
        },
        {
          prop: 'sex',
          label: '处理人',
          minWidth: 120
        },
        {
          prop: 'address',
          label: '处理状态',
          minWidth: 160
        },
        {
          prop: 'address',
          label: '处理时间',
          minWidth: 160
        },
        {
          prop: 'address',
          label: '处理意见',
          minWidth: 260
        },
      ]
    }
  },
  computed: {
    formatStatus() {
      const tempMap = {
        '已派单': {
          style: { color: '#AEDBF1'}
        },
        '已接收': {
          style: { color: '#30DCFF'}
        },
        '处理中': {
          style: { color: '#FF8A48'}
        },
        '未处理': {
          style: { color: '#A21941'}
        },
      }
      return category => {
        return tempMap[category] || {}
      }
    },
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleClose(done) {
      this.visible = false
      // done()
    },
    handleOpen(val) {
      this.visible = true;
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/newBase.scss';
  .title-box {
    margin: 10px 0 0 0;
  }
  // ::v-deep .el-table {
  //   margin: 0 10px;
  // }
  .el-form {
    padding: 0 10px 0 20px;
  }
  ::v-deep .el-form-item {
    margin: 3px 0;
    width: 80%;
  }

  ::v-deep .el-form-item__label {
    color: #BFEAFF;
    padding: 0 0 3px 0;
  }
  ::v-deep .el-form-item__content {
    color: #fff;
    padding: 3px 0 0 0;

  }
  
</style>
